// 此页面是数据可视化右边充电占比的动态有数据时才显示

// 滚动数字组件
$(function () {
  function initNum(i) {
    return {
      type: "group",
      left: i * 20,
      top: -5,
      width: 25,
      height: 40,

      bounding: "raw",
      children: [
        {
          type: "rect",
          left: "center",
          top: 0,
          style: {
            fill: "transparent",
          },
          shape: {
            width: 25,
            height: 20,
          },
        },
        {
          type: "rect",
          left: "center",
          top: 15,
          style: {
            fill: "transparent",
          },
          shape: {
            width: 25,
            height: 20,
          },
        },
        {
          id: "num-" + i,
          type: "text",
          left: "center",
          top: "middle",
          style: {
            fill: "#1ce6f3",
            text: 0,
            font: "20px Microsoft YaHei",
            borderType: "solid",
            borderWidth: 0.5,
            borderColor: "#1ce6f3",
            padding: [
              7, // 上
              5, // 右
              7, // 下
              5, // 左
            ],
          },
        },
      ],
    };
  }

  function initGraphic(num) {
    var str = num + "";
    var graphics = {
      type: "group",
      left: "center",
      top: "middle",
      width: str.length * 25,
      children: [],
    };

    // 生成数字
    for (var i = 0; i < str.length; i++) {
      graphics.children.push(initNum(i));
    }

    return graphics;
  }

  // 显示的数据
  var num = 88435894;

  option = {
    // backgroundColor: "#5B5C6E",
    graphic: initGraphic(num),
  };

  //防止图形未渲染
  setTimeout(function () {
    start();
  }, 30);

  function start() {
    var index = num - 200;
    index = index < 0 ? 0 : index;

    var timer = setInterval(function () {
      if (++index == num) {
        clearInterval(timer);
      }

      var graphics = {
        type: "group",
        children: [],
      };

      var str = index + "";
      for (var i = 0; i < str.length; i++) {
        graphics.children.push({
          id: "num-" + i,
          type: "text",
          style: {
            text: str[i],
          },
        });
      }

      myChart.setOption({
        graphic: graphics,
      });
    }, 10);
  }

  var preWarningSystem = echarts.init($("#totalNum #totalNumss")[0]);
  preWarningSystem.setOption(option);
});
